<template>
	<div class="shoporder-container">
	<ShopHeader :isInput="dataArr.isInput" 
		:iconArr="dataArr.iconArr" 
		:placeholder="dataArr.placeholder"
		:aimUrl="dataArr.aimUrl"
		:rightUrl="dataArr.rightUrl"
	/>
	<div class="shoporder-content">
		<div class="content-nav-wrap">
			<span class="selected">进行中</span>
			<span>已完成</span>
			<span>已关闭</span>
		</div>
		<div class="nav-item-wrap">
			<div class="live-nav-wrap">
				<div class="live-nav-item active">
					<p class="live-num">1</p>
					<p class="live-title">待发货</p>
				</div>
				<div class="live-nav-item">
					<p class="live-num">0</p>
					<p class="live-title">待付款</p>
				</div>
				<div class="live-nav-item">
					<p class="live-num">0</p>
					<p class="live-title">已发货</p>
				</div>
				<div class="live-nav-item">
					<p class="live-num">0</p>
					<p class="live-title">退款中</p>
				</div>
			</div>
			<div class="goods-wrap">
				<div class="goods-item1">
					<img src="../../../assets/images/shopping/order1.png" alt="">
					<span>电脑桌</span>
					<span>凡积简约现代 钢化玻璃电脑桌</span>
					<span>台式家用办公桌 简易学习书桌写字台</span>
					<span class="icon-style"><i class="iconfont icon-renminbi"></i>198</span>
					<span>购买时间：2017/12/12</span>
				</div>
				<div class="goods-item2">
					<span>买家已付款</span>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>
<script>
	import "../../../assets/iconfont/iconfont.css"
	import ShopHeader from "../../../components/shopheader"
	export default{
		name:'shoporder',
		data(){
			return{
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"商城订单",
					aimUrl:"/shopping/shopcar/checkorder",
					rightUrl:""
				}
			}
		},
		components:{
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	.shoporder-container{
		width: 100%;
		background-color: #efefef;
		// height: 700 / 50rem;
		overflow: hidden;
		.shoporder-content{
			width: 100%;
			margin-top: 88 / 2 / 50rem;
			overflow: hidden;
			.content-nav-wrap{
				width: 100%;
				height: 80 / 2 / 50rem;
				padding: 26 / 2 / 50rem  80 / 2 / 50rem; 
				box-sizing: border-box;
				background-color: #fff;
				color:#333;
				span{
					font-size: 15 / 50rem;
					font-weight: 700;
					text-align: center;
					width: 32%;
					height: 50 / 2 / 50rem;
					display: inline-block;
				}
				.selected{
					color: #f55;
				}
			}
			.nav-item-wrap{
				width: 100%;
				// height: 400 / 50rem;
				// background-color: red;
				margin-top: 24 / 2 / 50rem;
				overflow: hidden;
				.live-nav-wrap{
					width: 100%;
					height: 90 / 2 / 50rem;
					.live-nav-item{
						float: left;
						width: 25%;
						height: 90 / 2 / 50rem;
						background-color: #fff;
						text-align: center;
						color: rgba(0,0,0,.8);
						font-size: 10 / 50rem;
						p.live-num{
							margin-top: 20 / 2 / 50rem;
							margin-bottom: 4 / 2 / 50rem;
						}
					}
				}
				.goods-wrap{
					width: 95%;
					height: 260 / 2 / 50rem;
					background-color: #fff;
					margin: 0 auto;
					margin-top: 24 / 2 / 50rem;
					margin-bottom: 24 / 2 / 50rem;
					border-radius: 10 / 2 / 50rem;
					padding: 20 / 2 / 50rem;
					box-sizing: border-box;
					.goods-item1,.goods-item2{
						width: 100%;
					}
					.goods-item1{
						font-size: 10 / 2 / 50rem;
						height: 187 / 2 / 50rem;
						color: rgba(0,0,0,.7);
						overflow: hidden;
						img{
							height: 187 / 2 / 50rem;
							vertical-align: middle;
							margin-right: 10 / 2 / 50rem;
							float: left;
						}
						span{
							margin-top: 10 / 2 / 50rem;
							display: block;
							// margin-bottom: 2 / 2 / 50rem;
						}
						.icon-style{
							color: #f55;
							font-size: 12 / 2 / 50rem;
							margin-top: 12 / 2 / 50rem;
						}
					}
					.goods-item2{
						height: 33 / 2 / 50rem;
						position: relative;
						// background-color: blue;
						span{
							display: inline-block;
							margin-top: 10 / 2 / 50rem;
							margin-right: 240 / 2 / 50rem;
						}
					}
				}
			}
		}
		.active{
			border-bottom: 2 / 50rem solid #f55;
		}
	}
</style>